<template>
  <view class="bg-gray-100 min-h-screen pb-20">
    <!-- 顶部导航 -->
    <uni-nav-bar 
      title="闲置换钱"
      right-icon="camera"
      @click-right="openCamera"
    />

    <!-- 轮播图 -->
    <swiper class="h-80" :autoplay="true">
      <swiper-item v-for="(item,index) in banners" :key="index">
        <image :src="item" class="w-full h-full" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 商品列表 -->
    <view class="grid grid-cols-2 gap-4 p-4">
      <view 
        v-for="(item,index) in goodsList" 
        :key="index"
        class="bg-white rounded-lg overflow-hidden shadow-sm"
      >
        <image :src="item.cover" class="w-full h-48" />
        <view class="p-3">
          <text class="text-sm font-medium line-clamp-2">{{ item.title }}</text>
          <view class="flex justify-between items-center mt-2">
            <text class="text-primary font-bold">¥{{ item.price }}</text>
            <text class="text-gray-400 text-xs">{{ item.distance }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        'https://picsum.photos/750/300?random=1',
        'https://picsum.photos/750/300?random=2'
      ],
      goodsList: [
        {
          title: '小米10 8+128G 蓝色',
          price: 1899,
          distance: '1.2km',
          cover: 'https://picsum.photos/400/300?random=10'
        }
      ]
    }
  },
  methods: {
    openCamera() {
      uni.scanCode({
        success: res => {
          console.log(res)
        }
      })
    }
  }
}
</script>